<template>
  <div>
    <!-- 导航开始 -->
    <van-nav-bar title="新增待办事项">
      <van-icon
        @click="goback"
        name="arrow-left"
        color="black"
        slot="left"></van-icon>
    </van-nav-bar>
    <!-- 导航结束 -->
    <van-form @submit="onSubmit">
      <!-- 输入任意文本 -->
      <van-field
        type="text"
        name="content"
        v-model="content"
        label="待办内容"
        placeholder="待办内容"/>
      <van-field
        type="text"
        name="dueTime"
        v-model="due"
        readonly
        label="截止时间"
        placeholder="点击选择时间"
        @click="chooseTime"/>
      <van-field name="style" label="重要程度">
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio checked checked-color="rgb(101,147,74)" name="rgb(101,147,74)">一般</van-radio>
            <van-radio checked-color="rgb(220,167,93)" name="rgb(220,167,93)">重要</van-radio>
            <van-radio checked-color="rgb(219,69,52)" name="rgb(219,69,52)">紧急</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-action-sheet v-model="showTimePicker">
        <div class="content">
          <van-datetime-picker
            @confirm="confirm"
            @cancel="cancel"
            v-model="currentDate"
            type="datetime"
            title="选择完整时间"
            :min-date="minDate"
            :max-date="maxDate"/>
        </div>
      </van-action-sheet>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">
            提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import {Toast} from 'vant';

export default {
  data() {
    return {
      showTimePicker: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      content: "",
      due: "",
      radio: "a",
    };
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    onSubmit(values) {
      console.log(values);
      // 发送请求，提交添加内容
      this.$api.todoapi.add(values).then(res=>{
        console.log(res);
        Toast("添加成功");
        this.goback();
      })
    },
    chooseTime() {
      this.showTimePicker = true;
    },
    confirm(val) {
      val = this.moment(val).format("YYYY-MM-DD HH:mm");
      this.due = val;
      this.showTimePicker = false;
    },
    cancel() {
      this.showTimePicker = false;
    },
  },
};
</script>
